<!DOCTYPE html>
<!--项目路径 -->
<#assign ctxPath="${request.contextPath}" />
<!--静态文件目录 -->
<#assign staticPath="${request.contextPath}" />
<html>
<head>
    <meta charset="UTF-8">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="${staticPath}/element-ui/theme-chalk/element-ui.css">
</head>
<body>
<div id="app">

    <el-container>
        <el-header>定时任务管理</el-header>
        <el-container>
            <el-aside width="200px">

                <el-menu default-active="#0" class="el-menu-vertical-demo"  >

                    <template v-for="(item, index) in menus">
                        <el-menu-item :index="'#' + index" @click="toPage(index)">
                            <i class="el-icon-menu"></i>
                            <span slot="title">{{item.title}}</span>
                        </el-menu-item>

                    </template>

                </el-menu>

            </el-aside>
            <el-main>

                <el-breadcrumb separator="/">
                    <el-breadcrumb-item v-for="item in breadcrumbs">{{ item }}</el-breadcrumb-item>

                </el-breadcrumb>
                <br/>

                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>

</div>
</body>
<!-- 先引入 Vue -->
<script src="${staticPath}/vue.js"></script>
<script src="${staticPath}/vue-router.js"></script>
<script src="${staticPath}/vue-resource.js"></script>
<script src="${staticPath}/common.js"></script>
<!-- 引入组件库 -->
<script src="${staticPath}/element-ui/element-ui.js"></script>
<script>

    function iFrameHeight() {
        var ifm= document.getElementById("mainFrame");
        var subWeb = document.frames ? document.frames["iframepage"].document : ifm.contentDocument;
        if(ifm != null && subWeb != null) {
            ifm.height = subWeb.body.scrollHeight;
            ifm.width = subWeb.body.scrollWidth;
        }
    }

    // 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)

    // 1. 定义（路由）组件。
    // 可以从其他文件 import 进来
    var Foo = {
        props: ['src'],
        template: '<iframe id="mainFrame" :src="src"  scrolling="no" frameborder="0" width="100%" onLoad="iFrameHeight()"></iframe>',
    };

    // 2. 定义路由
    // 每个路由应该映射一个组件。 其中"component" 可以是
    // 通过 Vue.extend() 创建的组件构造器，
    // 或者，只是一个组件配置对象。
    // 我们晚点再讨论嵌套路由。
    var routes = [
        { path: '/:src', component: Foo , props: true}
    ]

    // 3. 创建 router 实例，然后传 `routes` 配置
    // 你还可以传别的配置参数, 不过先这么简单着吧。
    var router = new VueRouter({
        routes: routes // （缩写）相当于 routes: routes
    });


    // 4. 创建和挂载根实例。
    // 记得要通过 router 配置参数注入路由，
    // 从而让整个应用都有路由功能
    var app = new Vue({
        router: router,

        data : {

            menus: [

                {title: '用户管理', url: '/manager.jsp', breadcrumbs: ['用户管理'] },

                {title: 'API管理', url: '/index.jsp', breadcrumbs: ['API管理'] }

            ],

            breadcrumbs: []

        },
        methods: {

            toPage: function(index){
                var menu = this.menus[index];
                this.breadcrumbs = menu.breadcrumbs || [];
                this.$router.push(menu.url);
            }

        },

        created: function () {
            this.toPage( 0 )
        }
    }).$mount('#app');

    // 现

</script>
</html>